* {margin:0; padding:0;}

body { background-color: #eee; padding-top: 50px;
  background-color: rgb(204,232,207);
}

@font-face {
  font-family: 'aurora';
  src: url('Aurora_script.ttf');
}

h2 {
  font-family: aurora;
  text-align: center;
  font-size: 250%;
  color: red;
}

.container { position: relative;
  width:1000px;
  height:700px;
  margin:0px auto;
}

img { position: absolute;
  top:50px; 
  left:100px;
  cursor: pointer;
  padding:10px 10px 25px;
  background-color: #fff;
  border:1px solid #ddd;
  transition:0.5s;        /*compatibility*/
  -moz-transition:0.5s;
  -webkit-transition:0.5s;
  box-shadow: 3px 3px 3px #ccc;
}

img:hover { transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);
  transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2);
  box-shadow: 6px 6px 6px #656565;
  z-index: 2;
}

.img1 { left:20px; top:10px; transform: rotate(20deg);-moz-transform: rotate(20deg);-webkit-transform: rotate(20deg);z-index: 1;}
.img2 { left:156px; top:140px; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); z-index: 1;}
.img3 { left:381px; top:60px; transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); z-index: 1;}
.img4 { left:458px; top:256px; transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); z-index: 1;}
.img5 { left:684px; top:110px; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); z-index: 1;}
.img6 { left:15px; top:300px; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); z-index: 1;}
